{include file='header'/}
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <table id="model_table" lay-filter="model_table"></table>
    </div>
</div>
<script type="text/html" id="add_toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md"
            data-open="{:url('category/add')}"
            data-title="{:lang('category.add')}" data-reload="2">
        <i class="layui-icon layui-icon-add-1"></i>
        {:lang('add')}
    </button>
</script>

<script type="text/html" id="statusTpl">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch"
           lay-text="{:lang('enable')}|{:lang('disable')}"
           lay-filter="switchStatus"
           data-href="{:url('category/modify')}?id={{d.id}}&field=status" {{d.status== 1 ? 'checked' : '' }} />
</script>

<script type="text/html" id="barDemo">
    <button class="pear-btn pear-btn-primary pear-btn-xs" title="{:lang('edit')}"
            data-open="{:url('category/edit')}?id={{d.id}}"
            data-title="{:lang('edit')}" data-reload="2">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-xs" title="{:lang('delete')}"
            data-delete="{:url('category/delete')}?id={{d.id}}"
            data-title="{:lang('delete_confirm')}" data-reload="2">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

{include file='footer'/}
<script>
  layui.use(['table', 'jquery', 'drawer', 'treetable'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    var treetable = layui.treetable;

    // 渲染表格
    layer.load(2);
    var insTb = treetable.render({
      treeColIndex: 1,
      treeSpid: 0,
      treeIdName: 'id',
      treePidName: 'pid',
      treeDefaultClose: true,   //默认是否折叠
      elem: '#model_table',
      id: 'testReload',
      toolbar: '#add_toolbar',
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
        title: "{:lang('refresh')}"
      }, 'filter', 'exports'],
      method: 'get',
      url: "{:url('category/index')}",
      parseData: function (res) {
        return {
          "code": 0,
          "msg": res.msg,
          "count": res.count,
          "data": res.data
        };
      }
      , cellMinWidth: 100
      , cols: [[
        {field: 'id', title: 'ID', width: 60, align: 'center'}
        , {field: 'name', title: "{:lang('category.name')}", minWidth: 120, align: 'left'}
        , {field: 'model_name', title: "{:lang('category.model_name')}", width: 130}
        , {field: 'index_tpl', title: "{:lang('category.index_tpl')}", minWidth: 130}
        , {field: 'list_tpl', title: "{:lang('category.list_tpl')}", minWidth: 130}
        , {field: 'show_tpl', title: "{:lang('category.show_tpl')}", minWidth: 130}
        , {field: 'sort', title: "{:lang('sort')}", width: 120, align: 'center'}
        , {field: 'status', title: "{:lang('status')}", templet: '#statusTpl', width: 110, align: 'center'}
        , {fixed: 'right', title: "{:lang('operate')}", toolbar: '#barDemo', align: 'center', width: 130}
      ]]
      , page: false
      , done: function () {
        layer.closeAll('loading');
      }
    });

    /* 监听单元格编辑 */
    table.on('edit(model_table)', function (obj) {
      var value = obj.value
        , data = obj.data
        , field = obj.field;
      $.post("<?php echo url('category/modify'); ?>", {id: data.id, val: value, field: field}, function (res) {
        if (res.code === 200) {
          layer.msg(res.msg, {time: 1500, icon: 1}, function () {
            window.location.reload();
          });
        } else {
          layer.msg(res.msg, {time: 1500, icon: 2});
        }
      })
    });
    //监听行工具事件
    table.on('toolbar(model_table)', function (obj) {
      if (obj.event === 'refresh') {
        treetable.reload("#model_table");
      }
    });

  });
</script>
</body>

</html>
